<template>
  <div class="order-container">
    <div class="order-search-container">
      <!-- start 搜索框 -->
      <el-form
        :inline="true"
        :model="searchForm"
        @submit.native.prevent
        class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="searchForm.id" clearable placeholder="请填写订单号"></el-input>
        </el-form-item>
        <el-form-item label="租客名称">
          <el-input v-model="searchForm.lessee_name" clearable placeholder="请填写租客名称"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="searchForm.order_state" clearable placeholder="请选择订单状态">
            <el-option key="all" label="所有" value="all"></el-option>
            <el-option
              v-for="item in orderState"
              :key="item.type"
              :label="item.name"
              :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit" icon="el-icon-search" @click="orderSearch">搜索</el-button>
          <el-button type="primary" @click="clearValue">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- end 搜索框 -->
    </div>
    <div class="order-table-container">
      <!-- start 表格列表 -->
      <el-table
        :data="orderList"
        border
        height="100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        class="order-table"
        style="width: 100%">
        <el-table-column
          label="#"
          type="index">
        </el-table-column>
        <el-table-column prop="lessee_name" min-width="211" label="租客名称">
        </el-table-column>
        <el-table-column min-width="110" label="租金">
          <template slot-scope="scope">
            {{ scope.row.total_fee | unitFilter }}
          </template>
        </el-table-column>
        <el-table-column min-width="110" label="押金">
          <template slot-scope="scope">
            {{ scope.row.pledge_fee | unitFilter }}
          </template>
        </el-table-column>
        <el-table-column min-width="180" label="开始时间">
          <template slot-scope="scope">
            {{ scope.row.begin_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column min-width="180" label="结束时间">
          <template slot-scope="scope">
            {{ scope.row.end_time | formatTime }}
          </template>
        </el-table-column>
        <el-table-column min-width="110" label="订单状态">
          <template slot-scope="scope">
            {{ scope.row.order_state | stateFilter }}
          </template>
        </el-table-column>
        <el-table-column min-width="200" label="订单类型">
          <template slot-scope="scope">
             <el-button v-if='scope.row.kind === 0' class="customize-color-one" size="mini" type="info">普通租车</el-button>
            <el-button v-if='scope.row.kind === 10' class="customize-color-two" size="mini" type="warning">定制租车</el-button>
            <el-button v-if='scope.row.kind === 20' class="customize-color-three" size="mini" type="danger">长租租车</el-button>
            <el-button v-if='scope.row.kind === 30' class="customize-color-four" size="mini" type="warning">线下租车</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="详情信息"
          width="200px">
          <template slot-scope="scope">
            <el-button @click="lookOrderInfo(scope.row)" type="text" size="small">订单详情</el-button>
            <el-button @click="Staging(scope.row)" type="text" size="small">订单分期</el-button>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200px">
          <template slot-scope="scope">
            <el-button v-if='scope.row.kind === 30 && scope.row.order_state <= 60' size="mini" type="success" @click="VehicleRecycling(scope.$index, scope.row)">车辆回收</el-button>
            <el-button v-if='scope.row.order_state === 30 && scope.row.kind !== 30' size="mini" type="primary" @click="VehicleDelivery(scope.$index, scope.row)">车辆交付</el-button>
            <el-button v-if='scope.row.order_state === 60 && scope.row.kind !== 30' size="mini" type="success" @click="VehicleRecycling(scope.$index, scope.row)">车辆回收</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 表格列表 -->
    </div>
    <!-- pages 分页 start -->
    <div class="table-pages">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!-- pages 分页 end -->
    <div class="order-dialog">
      <!-- start 订单详情弹窗 -->
      <el-dialog
        title="订单详情"
        :visible.sync="dialogOrder"
        center
        width="800px">
        <el-row :gutter="10">
          <el-col :span="12" class="line">
            <span class="title">租客姓名：</span>
            <span>{{ orderDetail.lessee_name }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">车型：</span>
            <span>{{ orderDetail.car_model_name }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">车牌号：</span>
            <span>{{ orderDetail.car_no }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">开始时间：</span>
            <span>{{ orderDetail.begin_time | formatTime }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">结束时间：</span>
            <span>{{ orderDetail.end_time | formatTime }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">总金额：</span>
            <span>{{ orderDetail.total_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">租金：</span>
            <span>{{ orderDetail.total_rent_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">押金：</span>
            <span>{{ orderDetail.pledge_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">取车费：</span>
            <span>{{ orderDetail.pickup_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">送车费：</span>
            <span>{{ orderDetail.send_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">基础保障费：</span>
            <span>{{ orderDetail.total_base_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">保险费用：</span>
            <span>{{ orderDetail.total_insurance_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">车辆整备费：</span>
            <span>{{ orderDetail.total_additional_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">取车地点：</span>
            <span>{{ orderDetail.pickup_location }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">还车地点：</span>
            <span>{{ orderDetail.return_location }}</span>
          </el-col>
          <el-col :span="12" class="line" v:if="orderDetail.pickup_time">
            <span class="title">取车时间：</span>
            <span>{{ orderDetail.pickup_time | formatTime }}</span>
          </el-col>
          <el-col :span="12" class="line" v:if="orderDetail.return_time">
            <span class="title">还车时间：</span>
            <span>{{ orderDetail.return_time | formatTime }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">订单状态：</span>
            <span>{{ orderDetail.order_state | stateFilter }}</span>
          </el-col>
          <el-col :span="24" class="text" v-if="orderDetail.lender_meta && orderDetail.lender_meta.car_img_urls">
            <span class="title">取车图片：</span>
          </el-col>
          <el-col style="display: flex; overflow: auto;" :span="24" v-if="orderDetail.lender_meta && orderDetail.lender_meta.car_img_urls">
            <img :src="item" class="min-img" v-for="(item, index) in orderDetail.lender_meta.car_img_urls" @click="lookImg(item)" :key="index" alt="">
          </el-col>
          <el-col :span="24" class="text" v-if="orderDetail.lessee_meta && orderDetail.lessee_meta.car_img_urls">
            <span class="title">还车图片：</span>
          </el-col>
          <el-col style="display: flex; overflow: auto;" :span="24" v-if="orderDetail.lessee_meta && orderDetail.lessee_meta.car_img_urls">
            <img :src="item" class="min-img" v-for="(item, index) in orderDetail.lessee_meta.car_img_urls" @click="lookImg(item)" :key="index" alt="">
          </el-col>
        </el-row>
      </el-dialog>
      <!-- end 订单详情弹窗 -->

      <!-- start 处理订单 -->
      <el-dialog
        title="处理订单"
        :visible.sync="dialogDealWith"
        center
        width="600px"
        @close="orderForm = { balance: 0, content: '' }"
        class="dialog-deal-with-container">
        <el-row :gutter="10">
          <el-col :span="12" class="line">
            <span class="title">押金：</span>
            <span>{{ orderDetail.pledge_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">租金：</span>
            <span>{{ orderDetail.rent_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">取送费：</span>
            <span>{{ orderDetail.pickup_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">基础保障费：</span>
            <span>{{ orderDetail.base_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">补充保障费：</span>
            <span>{{ orderDetail.additional_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">手续费：</span>
            <span>{{ orderDetail.handling_fee | unitFilter }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">交车情况：</span>
            <el-tag
              :key="index"
              v-for="(tag, index) in lesseeTags">
              {{tag}}
            </el-tag>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">还车情况：</span>
            <el-tag
              :key="index"
              v-for="(tag, index) in lenderTags">
              {{tag}}
            </el-tag>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">交车备注：</span>
            <span v-if="orderDetail.lessee_meta">{{ orderDetail.lessee_meta.status }}</span>
          </el-col>
          <el-col :span="12" class="line">
            <span class="title">还车备注：</span>
            <span v-if="orderDetail.lender_meta">{{ orderDetail.lender_meta.status }}</span>
          </el-col>
          <el-col :span="24" class="text" v-if="orderDetail.lender_meta && orderDetail.lender_meta.car_img_urls">
            <span class="title">取车图片：</span>
          </el-col>
          <el-col style="display: flex; overflow: auto;" :span="24" v-if="orderDetail.lender_meta && orderDetail.lender_meta.car_img_urls">
            <img :src="item" class="min-img" v-for="(item, index) in orderDetail.lender_meta.car_img_urls" @click="lookImg(item)" :key="index" alt="">
          </el-col>
          <el-col :span="24" class="text" v-if="orderDetail.lessee_meta && orderDetail.lessee_meta.car_img_urls">
            <span class="title">还车图片：</span>
          </el-col>
          <el-col style="display: flex; overflow: auto;" :span="24" v-if="orderDetail.lessee_meta && orderDetail.lessee_meta.car_img_urls">
            <img :src="item" class="min-img" v-for="(item, index) in orderDetail.lessee_meta.car_img_urls" @click="lookImg(item)" :key="index" alt="">
          </el-col>
        </el-row>
        <el-form :model="orderForm" label-width="100px" class="order-form" @submit.native.prevent>
          <el-form-item label="金额：">
            <el-input v-model="orderForm.balance" type="number"></el-input>
          </el-form-item>
          <el-form-item label="备注：">
            <el-input type="textarea" v-model="orderForm.content"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="orderDealWith(operatType)">{{ operatType === 'give' ? '给租金' : '退押金' }}</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- end 处理订单 -->
      <!-- start 图片放大弹窗 -->
      <el-dialog
        :visible.sync="dialogBigImg"
        width="600px"
        height="600px">
        <img width="100%" :src="bigImg" alt="图片">
      </el-dialog>
      <!-- end 图片放大弹窗 -->
    </div>
    <!-- start 子订单详情弹窗 -->
    <div class="staging-order-dialog">
      <el-dialog
        title="分期订单详情"
        :visible.sync="dialogStagingOrder"
        center
        width="1000px">
        <el-table
          :data="stagingOrderList"
          border
          :header-cell-style="{ 'text-align': 'center' }"
          :cell-style="{ 'text-align': 'center' }"
          class="order-table"
          :row-class-name="tableRowClassName"
          style="width: 100%">
          <el-table-column
            label="期数"
            type="index">
          </el-table-column>
          <el-table-column width="100" label="租金">
            <template slot-scope="scope">
              {{ scope.row.rent_fee | unitFilter }}
            </template>
          </el-table-column>
          <el-table-column label="押金">
            <template slot-scope="scope">
              {{ scope.row.pledge_fee | unitFilter }}
            </template>
          </el-table-column>
          <el-table-column width="150" label="开始时间">
            <template slot-scope="scope">
              {{ scope.row.begin_time | formatTime }}
            </template>
          </el-table-column>
          <el-table-column width="150" label="结束时间">
            <template slot-scope="scope">
              {{ scope.row.end_time | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="取送费">
            <template slot-scope="scope">
              {{ scope.row.pickup_fee | unitFilter }}
            </template>
          </el-table-column>
          <el-table-column label="基础保障费">
            <template slot-scope="scope">
              {{ scope.row.base_fee | unitFilter }}
            </template>
          </el-table-column>
          <el-table-column label="补充保障服务费">
            <template slot-scope="scope">
              {{ scope.row.additional_fee | unitFilter }}
            </template>
          </el-table-column>
          <el-table-column label="手续费">
            <template slot-scope="scope">
              {{ scope.row.handling_fee | unitFilter }}
            </template>
          </el-table-column>
          <el-table-column label="订单状态">
            <template slot-scope="scope">
              {{ scope.row.order_state | stateFilter }}
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <!-- end 子订单详情弹窗 -->
  </div>
</template>

<script>
import { format } from 'date-fns'
import { regFenToYuan } from '@/utils/unitConversion'
export default {
  data () {
    return {
      searchForm: {
        id: '',
        lessee_account_id: '',
        lender_account_id: '',
        order_state: 'all'
      }, // 搜索条件
      orderState: [ // 订单状态
        { type: 0, name: '已创建' },
        { type: 10, name: '已取消' },
        { type: 20, name: '待支付' },
        { type: 30, name: '已支付' },
        { type: 40, name: '车主确认交车' },
        { type: 50, name: '用户确认交车' },
        { type: 60, name: '用户确认还车' },
        { type: 70, name: '车主确认还车' },
        { type: 80, name: '用户订单评论' }
      ],
      orderList: [], // 订单列表
      stagingOrderList: [], // 子订单列表
      orderTotal: 0, // 订单列表总数
      currentPage: 1, // 当前页码
      total: 0, // 列表总数
      pageSize: 10, // 每页多少条数据
      offset: 0,
      limit: 10,
      dialogOrder: false, // 是否显示订单详情
      dialogStagingOrder: false, // 分期子订单
      orderDetail: {}, // 订单详情
      dialogDealWith: false,
      type: [false, false, false, false],
      orderForm: {
        balance: 0,
        content: ''
      },
      operatType: 'give',
      dialogBigImg: false,
      bigImg: '',
      lenderTags: [],
      lesseeTags: []
    }
  },
  created () {
  },
  async mounted () {
    await this.getOrderInfoList()
  },
  methods: {
    // 分页功能搜索订单
    orderSearch () {
      this.currentPage = 1
      this.getOrderInfoList()
    },
    // 重置搜索条件
    clearValue () {
      this.searchForm = {
        id: '',
        lessee_account_id: '',
        lender_account_id: '',
        order_state: 'all'
      }
    },
    // 分页功能
    handleCurrentChange (val) {
      this.currentPage = val
      this.offset = (val - 1) * this.limit
      this.getOrderInfoList()
    },
    // 每页展示的数量
    handleSizeChange (val) {
      this.limit = val
      this.getOrderInfoList()
    },
    /**
     * @description 查看订单详情
     * @param { object } data 当前订单的数据
     * @returns void
     */
    lookOrderInfo (data) {
      this.orderDetail = data
      this.dialogOrder = true
    },

    // 显示证件大图
    lookImg (src) {
      this.bigImg = src
      this.dialogBigImg = true
    },
    // 显示租车子订单弹窗
    Staging (data) {
      this.StagingOrderList(data.id)
      this.dialogStagingOrder = true
    },
    // 给支付成功的子订单table 行添加颜色
    tableRowClassName ({ row, rowIndex }) {
      if (row.order_state === 20) {
        return 'warning-row'
      } else if (row.order_state === 10) {
        return 'cancel-row'
      } else if (row.order_state === 30) {
        return 'success-row'
      }
      return ''
    },
    // 服务商交付车辆
    VehicleDelivery (index, data) {
      this.$confirm('为避免交易纠纷，您可选择上传车辆交车图片作为交易凭证！', '提示', {
        confirmButtonText: '立即去上传',
        cancelButtonText: '不需要，直接交车',
        type: 'warning'
      }).then(() => {
        this.delivery(data)
      }).catch(() => {
        this.delivery(data)
      })
    },
    VehicleRecycling (index, data) {
      this.$confirm('为避免交易纠纷，您可选择上传选项作为交易凭证！', '提示', {
        confirmButtonText: '立即去上传',
        cancelButtonText: '不需要，直接收车',
        type: 'warning'
      }).then(() => {
        // this.$message({
        //   type: 'success',
        //   message: '上传成功!'
        // })
        this.recycling(data)
      }).catch(() => {
        this.recycling(data)
      })
    }
  },
  filters: {
    stateFilter: function (val) {
      switch (val) {
        case 0:
          return '已创建'
        case 10:
          return '已取消'
        case 20:
          return '待支付'
        case 30:
          return '已支付'
        case 40:
          return '车主确认交车'
        case 50:
          return '用户确认交车'
        case 60:
          return '用户确认还车'
        case 70:
          return '车主确认还车'
        case 80:
          return '用户订单评论'
        default:
          return '未知'
      }
    },
    formatTime: function (val) {
      if (!val) return ''
      if ((new Date(val)) <= 0) return '未还车'
      return format(new Date(val), 'yyyy-MM-dd HH:mm')
    },
    unitFilter: function (val) {
      if (!val) return '0.00 元'
      return regFenToYuan(val) + ' 元'
    }
  }
}
</script>

<style scoped lang="scss">
@import './index.scss'
</style>
